<template>
  <a-drawer
    :title="title"
    :width="width"
    placement="right"
    :closable="false"
    :showMask="false"
    :masl="false"
    :maskClosable="true"
    @close="handleCancel"
    :visible="visible"
    :maskStyle="{ opacity: 0 }"
    :wrapStyle="{ marginTop: '105px' }"
    :headerStyle="{ display: 'none' }"
    :drawerStyle="{ backgroundColor: '#F5F6F9' }"
  >
    <a-spin :spinning="confirmLoading">
      <div class="detail-container">
        <a-button v-show="visible" @click="handleCancel" class="closeBtn" type="danger">
          <a-icon style="font-size: 24px" type="close" />
        </a-button>
        <!-- 头部 -->
        <div class="detail-container-header">
          <div class="detail-container-header-top">
            <div class="detail-container-header-top-left">
              <img src="@/assets/crm/leads.png" style="width: 40px; height: 40px" />
              <div class="detail-container-header-top-left-title">
                <div class="title1">线索</div>
                <div class="title2">{{ detailData.leadsName }}</div>
              </div>
            </div>
            <div class="detail-container-header-top-right">
              <a-button type="primary" @click="handleReceiveOk"><span class="wk wk-receive" />&nbsp;领取</a-button>
              <a-button
                type="default"
                style="background-color: #389e0b !important; border-color: #389e0b; color: #fff"
                @click="allocVisible = true"
                ><span class="wk wk-alloc" />&nbsp;分配</a-button
              >
              <a-dropdown>
                <a-button type="default" icon="ellipsis" />
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a @click="showDeleteConfirm"> <span class="icon wk wk-delete"></span>删除</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
          <div class="detail-container-header-bottom">
            <a-row style="width: 100%">
              <a-col :span="3">
                <div>
                  <div class="name">线索名称</div>
                  <div class="value">{{ detailData.leadsName }}</div>
                </div>
              </a-col>
              <a-col :span="3">
                <div>
                  <div class="name">线索来源</div>
                  <div class="value">{{ detailData.source_dictText }}</div>
                </div>
              </a-col>
              <a-col :span="3">
                <div>
                  <div class="name">手机</div>
                  <div class="value">{{ detailData.mobile }}</div>
                </div>
              </a-col>
              <a-col :span="3">
                <div>
                  <div class="name">客户经理</div>
                  <div class="value">{{ detailData.ownerUserId_dictText }}</div>
                </div>
              </a-col>
              <a-col :span="3">
                <div>
                  <div class="name">创建时间</div>
                  <div class="value">{{ detailData.createTime }}</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
        <!-- 内容 -->
        <div class="detail-container-body">
          <a-row :gutter="16" style="height: 100%">
            <a-col :span="18" style="height: 100%">
              <div class="card">
                <div class="card-header">
                  <div
                    class="card-header-item"
                    :class="tabIndex == index ? 'active' : ''"
                    v-for="(item, index) in tabNames"
                    :key="index"
                    @click="changeTabIndex(index)"
                  >
                    {{ item.label }}
                  </div>
                </div>

                <div class="card-body">
                  <template v-if="tabIndex == 0">
                    <div class="card-body-content">
                      <relative-remark
                        v-model="content"
                        :id="detailData.id"
                        @successFile="successFile"
                      ></relative-remark>
                    </div>
                  </template>
                  <template v-if="tabIndex == 1">
                    <div class="card-body-content">
                      <tab-detail :baseInfolist="baseInfolist" :systemInfolist="systemInfolist"></tab-detail>
                    </div>
                  </template>
                  <template v-if="tabIndex == 2">
                    <div class="card-body-content">
                      <relative-file :id="detailData.id"></relative-file>
                    </div>
                  </template>
                  <template v-if="tabIndex == 3">
                    <div class="card-body-content">
                      <relative-handle :id="detailData.id"></relative-handle>
                    </div>
                  </template>
                </div>
              </div>
            </a-col>
            <a-col :span="6" style="height: 100%">
              <div class="card">
                <div class="card-header">
                  <div class="card-header-item active">重要信息</div>
                </div>
                <div class="card-body" style="overflow-y: scroll">
                  <div style="padding: 20px 10px">
                    <div class="import-info">
                      <div class="content-title">基本信息</div>
                      <p class="detail-cell" v-for="item in this.baseInfolist" :key="item.id">
                        <span class="detail-cell__label">{{ item.title }}</span
                        ><br />
                        <span class="detail-cell__value">
                          <span>{{ item.value }}</span>
                        </span>
                      </p>
                      <div class="content-title">系统信息</div>
                      <p class="detail-cell" v-for="item in this.systemInfolist" :key="item.id">
                        <span class="detail-cell__label">{{ item.title }}</span
                        ><br />
                        <span class="detail-cell__value">
                          <span>{{ item.value }}</span>
                        </span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>

      <a-modal title="分配" :visible="allocVisible" @ok="allocOk" @cancel="allocVisible = false">
        <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-form-item label="分配员工">
            <j-search-select-tag
              v-model="afterOwner"
              dict="Person,name,partyId,isModule=CRM"
              placeholder="请选择员工"
            />
          </a-form-item>
        </a-form>
      </a-modal>
    </a-spin>
  </a-drawer>
</template>

<script>
import { httpAction } from '@/api/manage'
import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
import moment from 'moment'
import RelativeRemark from '../components/RelativeRemark.vue'
import TabDetail from '../components/TabDetail.vue'
import RelativeFile from '../components/RelativeFile.vue'
import RelativeHandle from '../components/RelativeHandle.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'CrmLeadsModal',
  components: {
    JSearchSelectTag,
    RelativeRemark,
    RelativeFile,
    RelativeHandle,
    TabDetail,
  },
  props: {
    isSeas: Boolean,
  },
  data() {
    return {
      allocVisible: false,
      title: '操作',
      width: '70%',
      visible: false,
      confirmLoading: false,
      needEdit: false,
      // 卡片
      tabNames: [
        {
          label: '活动',
          name: 'Activity',
        },
        {
          label: '详细资料',
          name: 'CRMEditBaseInfo',
        },
        {
          label: '附件',
          name: 'RelativeFiles',
        },
        {
          label: '操作记录',
          name: 'RelativeHandle',
        },
      ],
      tabIndex: 0,

      // 第一个tab页面
      content: '', // 跟进内容

      // 第二栏模拟数据
      baseInfolist: [
        {
          id: 1,
          title: '线索来源',
          key: 'leadsName',
          value: '',
        },
        {
          id: 2,
          title: '客户行业',
          key: 'industry_dictText',
          value: '',
        },
        {
          id: 3,
          title: '客户级别',
          key: 'level_dictText',
          value: '',
        },
        {
          id: 4,
          title: '线索名称',
          key: 'leadsName',
          value: '',
        },
        {
          id: 5,
          title: '邮箱',
          key: 'email',
          value: '',
        },
        {
          id: 6,
          title: '手机',
          key: 'mobile',
          value: '',
        },
        {
          id: 7,
          title: '电话',
          key: 'telephone',
          value: '',
        },
        {
          id: 8,
          title: '地址',
          key: 'address',
          value: '',
        },
        {
          id: 9,
          title: '下次联系时间',
          key: 'nextTime',
          value: '',
        },
        {
          id: 10,
          title: '备注',
          key: 'remark',
          value: '',
        },
      ],
      systemInfolist: [
        {
          id: 11,
          title: '客户经理',
          key: 'ownerUserId_dictText',
          value: '',
        },
        {
          id: 12,
          title: '创建人',
          key: 'createUserId',
          value: '',
        },
        {
          id: 13,
          title: '创建时间',
          key: 'createTime',
          value: '',
        },
        {
          id: 14,
          title: '更新时间',
          key: 'updateTime',
          value: '',
        },
        {
          id: 15,
          title: '最后跟进时间',
          key: 'lastTime',
          value: '',
        },
      ],
      // 第四栏时间轴数据
      handlerLogList: [],
      url: {
        add: '/online/api/createCrmLeads',
        edit: '/online/api/updateCrmLeads',
        get: '/online/api/getCrmLeads',
        updateOwnerUserId: '/online/api/updateOwnerUserId',
        changeLeadsToCustomer: '/online/api/changeLeadsToCustomer',
        pagingWvVisitLog: '/online/api/pagingWvVisitLog',
      },
      detailData: {},
      afterOwner: '',
    }
  },
  computed: {},
  created() {},
  methods: {
    ...mapGetters(['userInfo']),
    moment,
    // 切换tab页
    changeTabIndex(index) {
      if (this.tabIndex == index) return
      this.tabIndex = index
    },

    // 文件
    successFile(obj) {
      let { file, type } = obj
      console.log(file, type)
    },

    add() {
      this.edit({})
    },
    edit(record) {
      this.visible = true
      if (record.id) {
        httpAction(this.url.get, { id: record.id }, 'post').then((res) => {
          if (res.success) {
            this.detailData = res.result

            this.baseInfolist.forEach((item) => {
              for (let i in this.detailData) {
                if (i == item.key) {
                  item.value = this.detailData[i]
                }
              }
            })
            this.systemInfolist.forEach((item) => {
              for (let i in this.detailData) {
                if (i == item.key) {
                  item.value = this.detailData[i]
                }
              }
            })
          }
        })
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    // 头部删除操作
    showDeleteConfirm() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '您确定要删除吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.$emit('handleDelete', that.detailData.id)
          that.close()
        },
        onCancel() {},
      })
    },
    // 头部领取操作
    handleReceiveOk() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '您确定要领取改线索吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          let data = { crmEntityName: 'CrmLeads', id: that.detailData.id, ownerUserId: that.userInfo().userLoginId }
          httpAction(that.url.updateOwnerUserId, data, 'put')
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.afterOwner = ''
                that.$emit('ok')
                if (that.model.id) {
                  that.$emit('loadDetailInfo', that.model)
                }
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
          // that.$emit('handleDelete', that.detailData.id)
          that.close()
        },
        onCancel() {},
      })
    },
    // 头部分配操作
    allocOk() {
      const params = { crmEntityName: 'CrmLeads', id: this.detailData.id, partyId: this.afterOwner }
      httpAction(that.url.updateOwnerUserId, params, 'put').then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.afterOwner = ''
          that.$emit('ok')
          if (that.model.id) {
            that.$emit('loadDetailInfo', that.model)
          }
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    changeLeadsToPublic() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '确定将这些线索放入公海吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          let data = { id: that.detailData.id, ownerUserId: 'public' }
          httpAction(that.url.updateCrmLeadsOwnerUserId, data, 'put')
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
          // that.$emit('handleDelete', that.detailData.id)
          that.close()
        },
        onCancel() {},
      })
    },
    changeLeadsToCustomer() {
      const that = this
      this.$confirm({
        title: '提示',
        content: '确定将这些线索转换为客户吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          let data = { id: that.detailData.id }
          httpAction(that.url.changeLeadsToCustomer, data, 'put')
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
          // that.$emit('handleDelete', that.detailData.id)
          that.close()
        },
        onCancel() {},
      })
    },
  },
}
</script>



<style lang="less" scoped>
/deep/ .ant-drawer-left.ant-drawer-open,
.ant-drawer-right.ant-drawer-open {
  z-index: 97 !important;
}
// 卡片样式
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  height: 100%;

  .card-header {
    background-color: #f5f7fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    margin: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;

    .card-header-item {
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      border: 2px solid transparent;
      cursor: pointer;
    }

    .active {
      border-top: 2px solid #168a40;
      color: #333;
      background-color: #fff;
      border-right-color: #e6e6e6;
      border-left-color: #e6e6e6;
    }
  }

  .card-body {
    flex: 1 1 auto;
    min-height: 1px;
    background-color: #fff;
    .card-body-content {
      height: 100%;
      overflow: scroll;
      padding: 24px 24px 50px 24px;
    }
  }
}

.closeBtn {
  background-color: #ff6a00 !important;
  position: absolute;
  top: 130px;
  left: -40px;
  z-index: 999;
  border: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding: 6px;
  width: 40px;
  height: 40px;
  &:hover {
    background-color: rgb(255, 90, 0);
  }
}

// 重要信息
.import-info {
  .content-title {
    font-size: 13px;
    font-weight: 600;
  }
  .detail-cell {
    font-size: 12px;
    margin: 20px 0;
  }
  .detail-cell__label {
    color: #666;
  }
  .detail-cell__value {
    display: inline-block;
    margin-top: 5px;
    color: #333;
    line-height: 16px;
  }
}
</style>

<style lang="less" scoped>
.detail-container {
  height: calc(100%);
  display: flex;
  flex-direction: column;
  .detail-container-header {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    .detail-container-header-top {
      padding: 30px 20px 10px;
      display: flex;
      align-items: center;
      .detail-container-header-top-left {
        display: flex;
        align-items: center;
        .detail-container-header-top-left-title {
          margin-left: 10px;
          .title1 {
            font-size: 12px;
          }
          .title2 {
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      .detail-container-header-top-right {
        margin-left: auto;
        display: flex;
        align-items: center;
      }
    }
    .detail-container-header-bottom {
      padding: 5px 24px;
      display: flex;
      align-items: center;
      .name {
        font-size: 12px;
      }
      .value {
        min-height: 14px;
        margin-top: 5px;
        font-size: 13px;
        color: #333;
        padding-bottom: 2px;
      }
    }
  }
  .detail-container-body {
    align-items: stretch;
    padding-top: 15px;
    flex: 1;
    overflow: hidden;
  }
}

::v-deep {
  textarea.ant-input {
    border: 0;
    padding: 0;
  }
  textarea.ant-input:focus {
    border: 0;
  }
  .ant-tabs-tabpane {
    overflow-y: scroll;
    padding-bottom: 50px;
  }
  .ant-spin-nested-loading {
    height: calc(100%);
  }
  .ant-spin-container {
    height: calc(100%);
  }
  .ant-drawer-body {
    padding: 0;
    height: calc(100% - 55px);
  }
  .ant-drawer-content {
    overflow: visible;
  }
  .ant-drawer-wrapper-body {
    overflow: visible;
  }
  .ant-btn {
    margin-right: 30px;
    margin-bottom: 10px;
  }
}
</style>
